<template>
  <div class="form-node">
    <je-form
      :model="properties"
      :colon="false"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      size="small"
      autocomplete="off"
    >
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" :header="$t('formNode.base')">
          <ShareBaseConfiguration
            :node-type="stencil.id"
            :properties="properties"
            :wf-editor="wfEditor"
            :node-id="nodeData.resourceId"
          />
        </je-collapse-panel>
        <je-collapse-panel
          v-if="stencil.id == 'countersign'"
          key="countersign"
          :header="$t('formNode.countersign')"
        >
          <CountersignConfiguration
            :node-id="nodeData.resourceId"
            :task-counter-sign-config="taskCounterSignConfig"
          />
        </je-collapse-panel>
        <je-collapse-panel
          v-if="stencil.id == 'random'"
          key="random"
          :header="$t('formNode.random')"
        >
          <RandomConfiguration :node-id="nodeData.resourceId" :random-config="randomConfig" />
        </je-collapse-panel>
        <!-- <je-collapse-panel v-if="stencil.id == 'joint'" key="joint" :header="$t('formNode.joint')">
          <JointConfiguration :candidate-config="candidateConfig" />
        </je-collapse-panel> -->
        <je-collapse-panel key="2" :header="$t('formNode.selectPersonnel')" class="personnel-panel">
          <SelectPersonnel
            :func-info="funcInfo"
            :assignment-config="assignmentConfig"
            :node-id="nodeData.resourceId"
            :node-type="stencil.id"
            :wf-editor="wfEditor"
          />
        </je-collapse-panel>
        <!-- <je-collapse-panel
          v-if="
            stencil.id == 'decision' ||
            (['countersign', 'batchtask'].indexOf(stencil.id) == -1 &&
              nodeData.properties.logicalJudgment == '1')
          "
          key="3"
          :header="$t('formNode.submitResolve')"
          class="event-panel"
        >
          <SubmitResolve
            v-model:commit-breakdown="commitBreakdown"
            :node-id="nodeData.resourceId"
            :wf-editor="wfEditor"
          />
        </je-collapse-panel> -->
        <je-collapse-panel
          v-if="['countersign', 'batchtask'].indexOf(stencil.id) == -1"
          key="4"
          :header="$t('formNode.rejectConfiguration')"
          class="event-panel"
        >
          <RejectConfiguration
            :dismiss-config="dismissConfig"
            :node-id="nodeData.resourceId"
            :wf-editor="wfEditor"
          />
        </je-collapse-panel>
        <je-collapse-panel key="5" :header="$t('formNode.warningDelays')" class="event-panel">
          <WarningDelays
            :early-warning-and-postponement="earlyWarningAndPostponement"
            :node-id="nodeData.resourceId"
          />
        </je-collapse-panel>
        <je-collapse-panel
          key="6"
          :header="$t('formNode.circulateConfiguration')"
          class="event-panel"
        >
          <CirculateConfiguration
            :pass-round-config="passRoundConfig"
            :node-id="nodeData.resourceId"
            :func-info="funcInfo"
          />
        </je-collapse-panel>
        <je-collapse-panel key="7" :header="$t('formNode.buttonConfiguration')" class="event-panel">
          <ButtonConfiguration
            :process-button-config="buttonsConfig"
            :node-id="nodeData.resourceId"
            :func-info="funcInfo"
            @setButtonConfig="setButtonConfig"
          />
        </je-collapse-panel>
        <je-collapse-panel key="8" :header="$t('formNode.eventConfiguration')" class="event-panel">
          <EventConfiguration
            v-model:customEventListeners="customEventListeners"
            :work-flow-info="funcInfo"
          />
        </je-collapse-panel>
        <!-- <je-collapse-panel
          v-if="['countersign', 'joint'].indexOf(stencil.id) == -1"
          key="9"
          :header="$t('formNode.endorseConfiguration')"
          class="event-panel"
        >
          <EndorseConfiguration
            :add-signature="addSignature"
            :node-id="nodeData.resourceId"
            :func-info="funcInfo"
          />
        </je-collapse-panel> -->
        <je-collapse-panel key="10" :header="$t('formNode.approvaNotice')">
          <ApprovaNotice :approval-notice="approvalNotice" :node-id="nodeData.resourceId" />
        </je-collapse-panel>
        <je-collapse-panel key="11" :header="$t('formNode.formControl')" class="event-panel">
          <FormControl
            :form-config="formConfig"
            :func-info="funcInfo"
            :node-id="nodeData.resourceId"
          />
        </je-collapse-panel>
      </je-collapse>
    </je-form>
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Collapse, Form } from '@jecloud/ui';
  import ShareBaseConfiguration from '@/components/share-base-configuration/index.vue';
  import SelectPersonnel from '@/components/select-personnel/index.vue';
  import CountersignConfiguration from '../form-countersign/countersign-configuration.vue';
  import RandomConfiguration from '../form-random/random-configuration.vue';
  /* import JointConfiguration from '../form-joint/joint-configuration.vue'; */
  /* import SubmitResolve from '@/components/submit-resolve/index.vue'; */
  import RejectConfiguration from '@/components/reject-configuration/index.vue';
  import WarningDelays from '@/components/warning-delays/index.vue';
  import CirculateConfiguration from '@/components/circulate-configuration/index.vue';
  import ButtonConfiguration from '@/components/button-configuration/index.vue';
  import EventConfiguration from '@/components/event-configuration/index.vue';
  /* import EndorseConfiguration from '@/components/endorse-configuration/index.vue'; */
  import ApprovaNotice from '@/components/approva-notice/index.vue';
  import FormControl from '@/components/form-control/index.vue';

  export default defineComponent({
    name: 'FormNode',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeForm: Form,
      ShareBaseConfiguration,
      SelectPersonnel,
      CountersignConfiguration,
      RandomConfiguration,
      /* JointConfiguration, */
      /* SubmitResolve, */
      RejectConfiguration,
      WarningDelays,
      CirculateConfiguration,
      ButtonConfiguration,
      EventConfiguration,
      /* EndorseConfiguration, */
      FormControl,
      ApprovaNotice,
    },
    props: {
      nodeData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const masterData = ref(props.nodeData);

      //基础数据
      const properties = ref(props.nodeData.properties);
      //节点类型
      const stencil = ref(props.nodeData.stencil);
      //提交分解
      const commitBreakdown = ref(props.nodeData.commitBreakdown);
      //会签配置
      const taskCounterSignConfig = ref(props.nodeData.taskCounterSignConfig);
      // 随机配置
      const randomConfig = ref(props.nodeData.randomConfig);
      //可处理人
      const assignmentConfig = ref(props.nodeData.assignmentConfig);
      //候选配置
      const candidateConfig = ref(props.nodeData.candidateConfig);
      //驳回配置
      const dismissConfig = ref(props.nodeData.dismissConfig);
      //预警延期
      const earlyWarningAndPostponement = ref(props.nodeData.earlyWarningAndPostponement);
      //传阅配置
      const passRoundConfig = ref(props.nodeData.passRoundConfig);
      //按钮配置
      const buttonsConfig = ref(props.nodeData.buttonsConfig);
      //事件配置
      const customEventListeners = ref(props.nodeData.customEventListeners);
      //加签配置
      const addSignature = ref(props.nodeData.addSignature);
      //审批告知
      const approvalNotice = ref(props.nodeData.approvalNotice);
      //表单控制
      const formConfig = ref(props.nodeData.formConfig);

      //监听类型值改变刷新数据
      watch(
        () => props.nodeData.resourceId,
        () => {
          masterData.value = props.nodeData;
          properties.value = props.nodeData.properties;
          stencil.value = props.nodeData.stencil;
          commitBreakdown.value = props.nodeData.commitBreakdown;
          taskCounterSignConfig.value = props.nodeData.taskCounterSignConfig;
          assignmentConfig.value = props.nodeData.assignmentConfig;
          candidateConfig.value = props.nodeData.candidateConfig;
          randomConfig.value = props.nodeData.randomConfig;
          dismissConfig.value = props.nodeData.dismissConfig;
          earlyWarningAndPostponement.value = props.nodeData.earlyWarningAndPostponement;
          passRoundConfig.value = props.nodeData.passRoundConfig;
          buttonsConfig.value = props.nodeData.buttonsConfig;
          customEventListeners.value = props.nodeData.customEventListeners;
          addSignature.value = props.nodeData.addSignature;
          approvalNotice.value = props.nodeData.approvalNotice;
          formConfig.value = props.nodeData.formConfig;
        },
      );

      //监听按钮配置数据变化,给主数据赋值
      const setButtonConfig = (data) => {
        masterData.value.buttonsConfig = data;
      };
      /*  watch(
        () => buttonsConfig.value,
        (newData) => {
          masterData.value.buttonsConfig = newData;
        },
      ); */
      //监听提交分解数据变化,给主数据赋值
      watch(
        () => commitBreakdown.value,
        (newData) => {
          masterData.value.commitBreakdown = newData;
        },
      );
      //监听事件配置数据变化,给主数据赋值
      watch(
        () => customEventListeners.value,
        (newVal) => {
          //给主数据从新赋值
          masterData.value.customEventListeners = newVal;
        },
      );

      //默认激活的面板
      const activeKey = ref([
        '1',
        '2',
        'countersign',
        'random',
        /* 'joint', */
        /* '3', */
        '4',
        '5',
        '6',
        '7',
        '8',
        /* '9', */
        '10',
        '11',
      ]);

      return {
        masterData,
        activeKey,
        properties,
        stencil,
        commitBreakdown,
        taskCounterSignConfig,
        assignmentConfig,
        candidateConfig,
        randomConfig,
        dismissConfig,
        earlyWarningAndPostponement,
        passRoundConfig,
        buttonsConfig,
        setButtonConfig,
        customEventListeners,
        addSignature,
        approvalNotice,
        formConfig,
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 19,
        },
      };
    },
  });
</script>

<style lang="less" scoped>
  .form-node {
    height: 100%;
    overflow-x: hidden !important;
  }
</style>
<style lang="less">
  .form-node {
    .event-panel {
      .ant-collapse-content > .ant-collapse-content-box {
        padding: 0px;
      }
    }
    .personnel-panel {
      .ant-collapse-content > .ant-collapse-content-box {
        padding: 0 0 16px 0;
      }
    }
  }
</style>
